<template>
  <div class="factory-figure-template">
    <div class="factory-page-list">
      <div class="search-header">
        <el-input v-model="searchInput" size="small" placeholder="搜索画像模板" @keyup.13.native="onSearch">
          <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="searchInput.length"></i>
          <el-button slot="append" type="primary" icon="el-icon-search" @click="onSearch"></el-button>
        </el-input>
      </div>
      <div class="factory-list">
        <ul class="list-wrap">
          <li
            class="list-item"
            :class="{ 'is-active': item.tmplId === grpFilter.tmplId }"
            v-for="item in results"
            :key="item.tmplId"
            @click="selectItem(item)"
          >
            <icon-svg name="iconFactoryAll"></icon-svg>
            <span class="list-name elli" :title="item.tmplNm">{{ item.tmplNm }}</span>
          </li>
        </ul>
        <el-pagination
          style="text-align: right"
          :current-page="params.currentPageNum"
          :page-size="params.pageSize"
          background
          layout="total, prev, pager, next"
          :total="totalSize"
          :pager-count="5"
          small
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <factory-tmpl-item ref="factoryTmplContainer" :grpFilter="grpFilter" @callback="refreshTmpl"></factory-tmpl-item>
  </div>
</template>

<script>
import FactoryTmplItem from './factory-tmpl-item'
import $factory from './api'
export default {
  name: 'FactoryFigureTemplate',
  components: { FactoryTmplItem },
  data() {
    return {
      searchInput: '',
      results: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {
          tmplType: 1
        },
        descPriority: false
      },
      totalSize: 0,
      grpFilter: {}
    }
  },
  methods: {
    init() {
      this.getResults()
    },
    getResults() {
      this.$nextTick(() => {
        this.$refs.factoryTmplContainer.setLoading(true)
        $factory.getImagePage(this.params).then(({ data }) => {
          if (data && data.code === '0') {
            this.results = data.data.records
            this.totalSize = data.data.totalSize
            if (this.results.length) {
              if (this.grpFilter.tmplId) {
                let record = data.data.records.find(item => item.tmplId === this.grpFilter.tmplId)
                if (record) this.selectItem(record)
              } else {
                this.selectItem(data.data.records[0])
              }
            }
            let maxPageNum = Math.ceil(data.data.totalSize / this.params.pageSize) || 1
            if (this.params.currentPageNum > maxPageNum) {
              this.params.currentPageNum = maxPageNum
              this.getResults()
            }
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.$refs.factoryTmplContainer.setLoading(false)
        })
      })
    },
    onSearch() {
      this.params.queryParams.tmplNm = this.searchInput
      this.getResults()
    },
    clearSearch() {
      this.searchInput = ''
      this.onSearch()
    },
    handleCurrentChange(num) {
      this.params.currentPageNum = num
      this.getResults()
    },
    selectItem(item) {
      this.grpFilter = item
    },
    refreshTmpl(result) {
      this.grpFilter = result
      this.getResults()
    }
  }
}
</script>

<style lang="scss" scoped>
.factory-figure-template {
  height: 100%;
}
</style>
